<template>
    <div class="json-viewer h-full p-4 font-mono text-lg overflow-auto">
        <div v-if="!parsedData" class="json-viewer-placeholder text-center py-8">
            {{ placeholder }}
        </div>
        <JsonNode v-else :data="parsedData" :name="''" :is-root="true" />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import JsonNode from './JsonNode.vue'

interface Props {
    modelValue: string
    placeholder?: string
}

const props = defineProps<Props>()

const parsedData = computed(() => {
    if (!props.modelValue.trim()) return null

    try {
        return JSON.parse(props.modelValue)
    } catch {
        return null
    }
})
</script>

<style lang="scss" scoped>
/* 组件样式已全局导入 */
</style>
